<template>
	<view>
		<view class="box_search_bg">
			<view class="box">
				<uni-status-bar />
				<image :src="configApp.webUrl + configApp.ruleApi + configApp.pictureOne" v-if="configApp.pictureOne" class="search_bg" mode="center"></image>
				
				<view class="search_input" >
					<u-search
					bgColor="#ffffff" 
					:placeholder="appConfig.searchTis" 
					clearabled 
					v-model="keyword" 
					shape="round" 
					:show-action="false"
					@search="searchChange"
					@custom="searchChange"
					></u-search>
				</view>
			</view>
		</view>
		
		<view class="height"></view>
	</view>
</template>

<script>
	import uniStatusBar from './uni-status-bar'
	export default {
		components:{
			uniStatusBar
		},
		data() {
			return {
				keyword:''
			}
		},
		methods:{
			// 搜索触发
			searchChange(e)
			{
				this.$emit('searchBtn',e)
			}
		}
	}
</script>

<style scoped lang="scss">
.box_search_bg{
	position: fixed;
	width: 100%;
	overflow: hidden;
	z-index: 99;
	.box{
		// #ifdef MP
		height: calc(var(--status-bar-height) + 320rpx);
		// #endif
		// #ifndef MP
		height: calc(var(--status-bar-height) + 280rpx);
		// #endif
		padding: 0 80rpx;
	}
	.search_bg{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		margin: 0 auto;
		z-index: 0;
	}
	.search_input{
		position: absolute;
		left: 0;
		right: 0;
		top: 100rpx;
		width: 80%;
		margin: 0 auto;
		// #ifdef MP
		margin-top: 44px;
		// #endif
		z-index: 10;
	}
}
.height{
	// #ifdef MP
	height: calc(var(--status-bar-height) + 320rpx);
	// #endif
	// #ifndef MP
	height: calc(var(--status-bar-height) + 280rpx);
	// #endif
}
</style>